
<template>
    <view class="container">
      <!-- 顶部导航 -->
      <view class="header">
        <view class="title">统计</view>
        <view class="icons">
          <!-- <image src="/static/icons/icon1.png" class="icon"></image> -->
          <!-- <image src="/static/icons/icon2.png" class="icon"></image> -->
          <!-- <image src="/static/icons/close.png" class="icon"></image> -->
        </view>
      </view>
  
      <!-- Tab 切换 -->
      <view class="tabs">
        <text :class="{ active: activeTab === 'team' }" @tap="setActiveTab('team')">团队统计</text>
        <text :class="{ active: activeTab === 'individual' }" @tap="setActiveTab('individual')">个人统计</text>
      </view>
  
      <!-- 导出报表 -->
      <view class="report">
        <view class="left">导出报表</view>
        <view class="right">12月汇总 ></view>
      </view>
  
      <!-- 统计类型切换 -->
      <view class="stats-tabs">
        <text
          :class="{ active: statsTab === 'daily' }"
          @tap="setStatsTab('daily')"
        >
          日统计
        </text>
        <text
          :class="{ active: statsTab === 'weekly' }"
          @tap="setStatsTab('weekly')"
        >
          周统计
        </text>
        <text
          :class="{ active: statsTab === 'monthly' }"
          @tap="setStatsTab('monthly')"
        >
          月统计
        </text>
      </view>
  
      <!-- 日统计UI -->
      <view v-if="statsTab === 'daily'" class="daily-tab">
        <calerdar :disabledDate="disabledDate"></calerdar>
        <view class="progress">
          <view class="circle">
            <text>打卡人数/应到人数</text>
          </view>
        </view>
  
        <view class="status">
          <view class="status-item" v-for="(status, index) in statuses" :key="index">
            <text>{{ status.name }}</text>
            <text>{{ status.value }}</text>
          </view>
        </view>
      </view>
  
      <!-- 周统计UI -->
      <view v-if="statsTab === 'weekly'" class="weekly-tab">
        <view class="week-selector">
          <text>2021年</text>
          <view class="weeks">
            <text :class="{ selected: selectedWeek === week }" @tap="selectWeek(week)" v-for="(week, index) in weeks" :key="index">
              {{ week }}
            </text>
          </view>
        </view>
  
        <view class="status">
          <view class="status-item" v-for="(status, index) in weeklyStatuses" :key="index">
            <text>{{ status.name }}</text>
            <text>{{ status.value }}</text>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import Calerdar from "../Calendar/index.vue";
  import {formatTime} from "@/utils";

  export default {
    components: {
      Calerdar
    },
    data() {
      return {
        activeTab: "team", // 切换“团队统计”或“个人统计”
        statsTab: "daily", // 切换“日统计”“周统计”“月统计”
        today: 13, // 当前日期
        days: [11, 12, 13, 14, 15, 16, 17], // 示例日历数据
        statuses: [
          { name: "未打卡", value: 16 },
          { name: "迟到", value: 1 },
          { name: "早退", value: 1 },
          { name: "外勤", value: "全勤分类" },
        ],
        weeks: ["第一周", "第二周", "第三周", "第四周"],
        selectedWeek: "第三周",
        weeklyStatuses: [
          { name: "出勤人数", value: 20 },
          { name: "平均工时(小时)", value: 8 },
          { name: "外勤", value: 2 },
          { name: "缺卡", value: 1 },
        ],
      };
    },
    methods: {
      disabledDate(date) {
        const parsedDate = new Date(date); // 统一解析日期
        if (isNaN(parsedDate.getTime())) {
          console.error('Invalid date:', date);
          return false; // 如果日期无效，返回 false
        }

        if (parsedDate.getDate() === 30) {
          console.log(formatTime(date), '传入的函数');
          console.log('周末?', parsedDate.getDay() === 0 || parsedDate.getDay() === 6);
        }
        console.log(parsedDate.getDay() === 0 || parsedDate.getDay() === 6,parsedDate.getDate(),'周末')
        return parsedDate.getDay() === 0 || parsedDate.getDay() === 6;
      },

      setActiveTab(tab) {
        this.activeTab = tab;
      },
      setStatsTab(tab) {
        this.statsTab = tab;
      },
      selectDay(day) {
        this.today = day;
      },
      selectWeek(week) {
        this.selectedWeek = week;
      },
    },
  };
  </script>
  
  <style scoped>
  /* 基础样式 */
  .container {
    padding: 16rpx;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .icons {
    display: flex;
  }
  
  .icon {
    width: 40rpx;
    height: 40rpx;
    margin-left: 16rpx;
  }
  
  .tabs {
    display: flex;
    justify-content: space-around;
    margin: 20rpx 0;
  }
  
  .tabs text {
    font-size: 28rpx;
    color: #888;
  }
  
  .tabs .active {
    color: #000;
    border-bottom: 4rpx solid #000;
  }
  
  .report {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
    font-size: 28rpx;
  }
  
  .stats-tabs {
    display: flex;
    justify-content: space-around;
    background: #f8f8f8;
    border-radius: 8rpx;
    padding: 10rpx 0;
  }
  
  .stats-tabs text {
    font-size: 28rpx;
    color: #888;
  }
  
  .stats-tabs .active {
    color: #000;
    border-bottom: 4rpx solid #000;
  }
  
  .calendar {
    margin-top: 20rpx;
  }
  
  .year-month {
    font-size: 28rpx;
    text-align: center;
    margin-bottom: 10rpx;
  }
  
  .week {
    display: flex;
    justify-content: space-evenly;
    font-size: 24rpx;
  }
  
  .days {
    display: flex;
    justify-content: space-evenly;
  }
  
  .days text {
    font-size: 24rpx;
    color: #888;
  }
  
  .days .today {
    color: #fff;
    background: #007aff;
    border-radius: 50%;
    padding: 5rpx 10rpx;
  }
  
  .progress {
    margin: 20rpx 0;
    text-align: center;
    font-size: 28rpx;
  }
  
  .status {
    display: flex;
    justify-content: space-around;
    margin: 20rpx 0;
  }
  
  .status-item {
    text-align: center;
    font-size: 24rpx;
  }
  
  .week-selector {
    margin-top: 20rpx;
  }
  
  .weeks {
    display: flex;
    justify-content: space-evenly;
    margin-top: 10rpx;
  }
  
  .weeks .selected {
    color: #007aff;
    font-weight: bold;
  }
  </style>